<template>
  <div>
    <div class="red"></div>
    <!-- 搜索框 -->
    <div class="qwe">
      <div class="search">
        <div class="search_a">
          <input type="text" v-model="keyword" @keyup.enter="search($event)" @keyup="keywords"
            @blur="hidekeyword"
            @focus="showkeyword"/>
          <router-link
            :to="`/qwe/search/${this.$router.history.current.name}/${this.keyword}`"
            >Q</router-link
          >
        </div>
        <div class="search_b" v-if="iskeyword">
          <Keyword :keyword="keyword"></Keyword>
        </div>
      </div>
      <!-- 选项卡 -->
      <div class="tab">
        <div class="tab_a">
          <p>
            <router-view :key="$route.fullPath" name="SearchNum"></router-view>
          </p>
        </div>
        <ul class="tab_b">
          <li :class="{ show: searchA }">
            <router-link :to="`/qwe/search/1/${this.keyword}`"
              >单曲</router-link
            >
          </li>
          <li :class="{ show: searchB }">
            <router-link :to="`/qwe/search/100/${this.keyword}`"
              >歌手</router-link
            >
          </li>
          <li :class="{ show: searchC }">
            <router-link :to="`/qwe/search/10/${this.keyword}`"
              >专辑</router-link
            >
          </li>
          <li :class="{ show: searchD }">
            <router-link :to="`/qwe/search/1014/${this.keyword}`"
              >视频</router-link
            >
          </li>
          <li :class="{ show: searchE }">
            <router-link :to="`/qwe/search/1000/${this.keyword}`"
              >歌单</router-link
            >
          </li>
          <li :class="{ show: searchF }">
            <router-link :to="`/qwe/search/1006/${this.keyword}`"
              >歌词</router-link
            >
          </li>
          <li :class="{ show: searchG }">
            <router-link :to="`/qwe/search/1009/${this.keyword}`"
              >声音主播</router-link
            >
          </li>
          <li :class="{ show: searchH }">
            <router-link :to="`/qwe/search/1002/${this.keyword}`"
              >用户</router-link
            >
          </li>
        </ul>
        <div class="tab_c">
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Keyword from "../components/Keyword.vue";
export default {
  components: { Keyword },
  data() {
    return {
      iskeyword: false,
      // 搜索框的内容
      keyword: " ",
      type:"",
      // 搜索的数据
      searchData: "",
      // 搜索到的数据总量
      searchDatanum: 0,
      // 显示那个选项卡
      searchA: false,
      searchB: false,
      searchC: false,
      searchD: false,
      searchE: false,
      searchF: false,
      searchG: false,
      searchH: false,
    };
  },
  created() {
    this.keyword = this.$route.params.value;
    this.type = this.$router.history.current.name;
    switch (this.$router.history.current.name) {
      case "1":
        this.searchA = true;
        break;
      case "100":
        this.searchB = true;
        break;
      case "10":
        this.searchC = true;
        break;
      case "1014":
        this.searchD = true;
        break;
      case "1000":
        this.searchE = true;
        break;
      case "1006":
        this.searchF = true;
        break;
      case "1009":
        this.searchG = true;
        break;
      case "1002":
        this.searchH = true;
        break;
    }
  },
  methods: {
    search(e) {
      this.iskeyword = false;
      e.target.blur();
      if (this.keyword) {
        this.$router.push(`/qwe/search/${this.type}/${this.keyword}`);
      }
    },
    keywords() {
      if (this.keyword) {
        this.iskeyword = true;
      } else {
        this.iskeyword = false;
      }
    },
    // 隐藏搜索提示框
    hidekeyword() {
      setTimeout(() => {
        this.iskeyword = false;
      }, 100);
    },
    // 显示搜索提示框
    showkeyword() {
      if (this.keyword) {
        this.iskeyword = true;
      }
    },
  },
};
</script>
<style scoped>
.red {
  height: 6px;
  background-color: #c20c0c;
}
/* 搜索框 */
.qwe {
  width: 980px;
  padding: 40px;
  margin: 0 auto;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  background-color: #fff;
}
.search {
  position: relative;
}
.search_a {
  display: flex;
  width: 420px;
  margin: 0 auto;
  height: 40px;
}
.search_a input {
  width: 370px;
  height: 40px;
  outline: none;
  border-radius: 5px 0 0 5px;
  border: 1px solid #c9c9c9;
  border-right: none;
  padding: 0 20px;
}
.search_a a {
  display: block;
  width: 50px;
  height: 40px;
  background-color: #f4f4f4;
  border: 1px solid #c9c9c9;
  text-align: center;
  line-height: 40px;
}
.search_b {
  position: absolute;
  top: 45px;
  left: 240px;
  width: 420px;
  background-color: #ffffff;
  box-shadow: 0 4px 7px #555;
  border-radius: 3px;
  z-index: 10;
}
/* 选项卡 */
.tab {
  margin-top: 30px;
}
.tab .tab_a {
  margin-bottom: 20px;
}
.tab .tab_b {
  display: flex;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.tab .tab_b li {
  flex: 1;
  height: 40px;
  background-color: #f7f7f7;
  text-align: center;
  line-height: 40px;
  border-top: 2px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
.tab .tab_b li a {
  display: block;
}
.tab .tab_b li:hover {
  border-top: 2px solid #d13030;
}
.tab .tab_b .show {
  background-color: #fff;
  border-top: 2px solid #d13030;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-bottom: none;
}
.tab_c {
  margin-top: 20px;
}
</style>